<example name="Query Assist Ng">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <button ng-click="ctrl.disabled = !ctrl.disabled">Disable/Enable</button>

      <div>
        <p>{{ ctrl.query || 'no value' }}</p>

        <rg-query-assist
          x-clear="true"
          x-data-source="ctrl.source"
          x-disabled="ctrl.disabled"
          glass="true"
          focus="ctrl.focus"
          query="ctrl.query"
          on-apply="ctrl.save"
          on-change="ctrl.change"
          on-focus-change="ctrl.focusChange"
          placeholder="'placeholder'"
          hint="'Press ⇥ to complete first item'"
          hint-on-selection="'Press ↩ to complete selected item'"></rg-query-assist>

        <p ng-repeat="query in ctrl.queries track by $index">{{ query }}</p>
      </div>
    </div>
  </file>

  <file type="js">
    import hubConfig from 'ring-ui-docs/components/hub-config';

    import angular from 'angular';
    import AuthNg from '@jetbrains/ring-ui/components/auth-ng/auth-ng';
    import QueryAssistNg from '@jetbrains/ring-ui/components/query-assist-ng/query-assist-ng';

    angular.module('test', [QueryAssistNg, AuthNg]).config(function (authProvider) {
      authProvider.config(hubConfig);
    }).controller('testCtrl', function ($http, $scope) {
      const ctrl = this;
      ctrl.queries = [];
      ctrl.query = 'query';
      ctrl.focus = true;
      ctrl.disabled = true;

      ctrl.save = function ({query}) {
        ctrl.queries.unshift(query);
      };

      ctrl.change = function ({query}) {
        ctrl.query = query;
        console.log('ctrl.change:: Query = ', query);
      };

      ctrl.focusChange = function ({focus}) {
        ctrl.focus = focus;
      };

      ctrl.source = function ({query, caret, omitSuggestions}) {
        const config = {
          params: {
            fields: 'query,caret,styleRanges' + (omitSuggestions ? '' : ',suggestions'),
            query: query,
            caret: caret
          }
        };

        return $http.get(hubConfig.serverUri + '/api/rest/users/queryAssist', config).
          then(function (data) {
            return data.data;
          });
      }
    });
  </file>
</example>
